<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <span> 元素 </span>
    <span class="sp"> 有 class 的 span 1</span>
    <span class="sp"> 有 class 的 span 2</span>
    <span id="s"> 有 id 的 span s </span>
    <span ok="o"> 有 ok 属性的 span </span>

    <div>
      <p>pppppp</p>
    </div>

    <script src="jquery/jquery-3.6.1.js"></script>
    <script>
      // $ = jQuery
      let spans = $("span");
      console.log(spans);

      // jquery 对象 --> js 对象  jq[index]
      console.log($("#s"));
      // js 对象 --> jq 对象 $(js对象)
      console.log($(document.getElementById("s")));
      console.log(jQuery(document.querySelector("#s")));

      //   $("#s").html("<p>hello jQuery</p>"); // 设置内容
      //   $("#s").text("hello");
      console.log($("#s").html()); // 获取内容

      // 网页加载完成事件
      window.onload = () => {
        console.log("window.onload");
      };

      window.onload = () => {
        console.log("window.onload - 1111");
      };

      $(() => {
        console.log("jq onload");
      });

      $(() => {
        console.log("jq onload - 111");
      });

      $(() => {
        console.log("jq onload - 222");
      });

      $(document).ready(() => {
        console.log("jq ready");
      });

      document.querySelector("#s").onclick = () => {
        console.log("js.click");
      };

      document.querySelector("#s").onclick = () => {
        console.log("js.click 2");
      };

      $("#s").click(() => {
        console.log("jq.click");
      });

      $("#s").on("click", () => {
        console.log("jq click2");
      });

      console.log(document.querySelector("#s").style.color);
      console.log($("#s").css("color")); // 获取 css 值
      $("#s").css("background-color", "red"); // 设置 css 属性
      $("#s").css("fontSize", "20px"); // 设置 css 属性

      $("#s").addClass("active"); // classList.add()
      $("#s").removeClass("active");
    </script>
  </body>
</html>
